<template>
  <!-- 编辑用户 -->
  <div class="edituser">
    <div class="edituser_search">
      <el-row>
        <el-col :span="4" :offset="1">
          <el-select v-model="cur_sel_roleItem.text"  clearable placeholder="请选择">
            <el-option v-for="item in role_list" :key="item.id" :label="item.label" :value="item.text" @click.native="cur_sel_roleItem=item;get_user_list()">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input type="text" placeholder="搜索用户" class="search_user" v-model="search_user_text" @keyup.enter.native="get_user_list"></el-input>
        </el-col>
        <el-col :span="4">
           <el-button style="margin-left:30px;margin-top:5px;" type="primary" size="mini"  @click.native="get_user_list()">搜索</el-button>
        </el-col>
        <el-col :span="4 " :offset="7">
          <addUser :role_list="role_list" @on-add-success="(data)=>addSuccess(data)" />
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="user_data.list"
      style="width: 100%">
      <el-table-column
        prop="mobilePhone"
        label="子账号ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="roleNameStr"
        label="角色">
      </el-table-column>
      <el-table-column
        label="操作用户">
        <template slot-scope="scope">
            <operation-drop-down :user-id="scope.row.id" :role-list="role_list" @on-update-success="(data) => updateSuccess(data, key)" @on-delete-success="user_data.list.splice(key, 1)" />
      </template>
      </el-table-column>
      </el-table>
      <div class="pagination" v-show="user_data.totalNum">
        <el-pagination layout="prev, pager, next" :total="user_data.totalNum*10" @current-change="handleCurrentChange" />
      </div>
  </div>
</template>
<script>
import addUser from "~/components/permission/addUser.vue";
import OperationDropDown from "~/components/permission/operationDropDown.vue";
import { getWebRoleDropDown, getWebUserList } from "~/api/";
export default {
  components: { addUser, OperationDropDown },
  async asyncData({ app }) {
    try {
      const res = await getWebRoleDropDown(app);
      if (res.code === "0") return { role_list: res.data.dropDownList };
      return { role_list: [] };
    } catch (error) {
      console.log("页面：/ecp-web/permission/edituser，错误信息：error");
    }
  },
  data() {
    return {
      //支持搜索的下拉列表
      cur_sel_roleItem: {},
      //搜索用户
      search_user_text: "",
      //用户列表
      user_data: [],
      pageNum: 1,
      pageSize: 10,
      oper_top: true, //控制才做三角箭头
      cur_oper_id: null
    };
  },
  beforeMount() {
    // this.get_role_List()
    this.get_user_list();
  },
  methods: {
    addSuccess(data) {
      this.user_data.list.push({
        mobilePhone: data["mobilePhone"],
        name: data["name"],
        email: data["email"],
        roleNameStr: data["roleNameStr"]
      });
    },
    updateSuccess(data, key) {
      this.user_data.list[key]["mobilePhone"] = data["mobilePhone"];
      this.user_data.list[key]["email"] = data["email"];
      this.user_data.list[key]["name"] = data["name"];
      this.user_data.list[key]["roleNameStr"] = data["roleNameStr"];
    },
    async get_user_list() {
      //	获取管理后台用户分页列表
      let res = await getWebUserList(
        this,
        this.search_user_text,
        this.cur_sel_roleItem ? this.cur_sel_roleItem.id : "",
        this.pageNum,
        this.pageSize
      );
      if (res.code === "0") {
        this.user_data = res.data.page;
      } else {
        this.$message.error(res.message);
      }
    },
    handleCurrentChange(current_page) {
      this.pageNum = current_page;
      this.get_user_list();
    }
  }
};
</script>

<style lang="scss" scoped>
.edituser {
  height: 100%;
  input {
    text-align: center;
  }
  &_search {
    padding: 43px 0 54px 0;
    .el-select {
      margin-right: 20px;
    }
    & /deep/ {
      input {
        height: 35px !important;
        border-radius: 35px !important;
      }
    }
  }

  & /deep/ {
    .cell {
      text-align: center;
      font-size: 16px;
      color: #000;
    }
    thead .cell {
      font-size: 18px;
      color: #0070ff;
      font-weight: normal;
    }
    .el-table th.is-leaf,
    .el-table td {
      border-bottom: none;
    }
    table tr {
      background: #f5f9fe;
    }
    .pagination {
      text-align: center;
      padding: 50px 0;
      background: #f5f9fe;
      button,
      li {
        background: transparent;
      }
      .el-pager li {
        font-size: 20px !important;
      }
      .el-icon-arrow-left:before,
      .el-icon-arrow-right:before {
        content: "\E606" !important;
        font-size: 20px;
      }
      .el-icon-arrow-right {
        transform: rotate(180deg);
      }
    }
  }
}
</style>

